<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      header-row-class-name="header_stock"
      ref="chatContent"
      :max-height="height"
      class="stock_linlist_table"
      :height="height"
      @row-click="cellClicks"
    >
      <el-table-column
        fixed
        :label="$t('m.industry')"
        min-width="100"
        class-name="stock_list_left"
        prop="name"
      >
        <template slot-scope="scope">
          <h2 class="f-cb stock_list_h2">
            {{ scope.row.name }}
          </h2>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('m.quoteChange')"
        sortable
        :sort-method="gainSort"
        width="100"
        class-name="stock_list_center"
        prop="gain"
      >
        <template slot-scope="scope">
          <h2
            :class="
              scope.row.gain > 0 ? 'red' : scope.row.gain == 0 ? '' : 'green'
            "
          >
            {{ scope.row.gain > 0 ? "+" : ""
            }}{{
              scope.row.gain == 0 ? 0 : (scope.row.gain * 100) | toFixed(2)
            }}%
          </h2>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('m.Leading_stocks')"
        min-width="100"
        class-name="stock_list_center"
        prop="leadUp.name"
      >
        <template slot-scope="scope">
          {{ scope.row.leadUp.name }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ["sortList", "stockHeight"],
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
  },
  data() {
    return {
      height: null,
      tableData: [],
      scroll: 0,
      windowHeight: 0,
      scrollHeight: 0,
      loading: true,
    };
  },
  mounted() {
    this.height = this.stockHeight;
    // 通过$refs获取dom元素
    // var box = this.$refs.chatContent.bodyWrapper
    // box.addEventListener('scroll',this.paperScroll)
    // this.getleaddata();
    this.getleaddata();
  },
  computed: {},
  methods: {
    // paperScroll(){
    //   var _this = this;
    //   var box = this.$refs.chatContent.bodyWrapper
    //   // 滚动距离
    //   this.scroll =  box.scrollTop;
    //   // 变量windowHeight是可视区的高度
    //   this.windowHeight = box.clientHeight || box.clientHeight
    //   // 变量scrollHeight是滚动条的总高度
    //   this.scrollHeight = box.scrollHeight || box.scrollHeight
    //   if (this.scroll + this.windowHeight == this.scrollHeight) {

    //     _this.loading = true
    //     _this.getleaddata()
    //     // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
    //   }
    // },
    // sotrname(column) {
    //   console.log(column)
    //   this.sortFor(this.sortList.name,column.order)
    // },
    cellClicks(row) {
      if (this.$route.name == "us_Market")
        this.$router.push({ path: `/us_industry/${row.key}` });
      else if (this.$route.name == "sh_Market")
        this.$router.push({ path: `/sh_industry/${row.key}` });
      else this.$router.push({ path: `/hk_industry/${row.key}` });
    },
    // sortFor(obj,order) {
    //   // 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序
    //     if (order == "ascending") {
    //       this.sortList.submit[obj] = this.sortList[obj][1]
    //     } else if (order == "descending") {
    //       this.sortList.submit[obj] = this.sortList[obj][2]
    //     } else {
    //       this.sortList.submit[obj] = this.sortList[obj][0]
    //     }
    //     this.getleaddata()
    // },
    // 涨跌排序
    gainSort(obj1, obj2) {
      let val1 = obj1.gain;
      let val2 = obj2.gain;
      return val1 - val2;
    },
    async getleaddata() {
      const res = await this.$axios.get(this.sortList.url, {
          params: this.sortList.submit,
        });
      if (res.code != 1) return this.$message.error(res.msg);
      this.tableData = [...this.tableData, ...res.data.list];
    },
    // getleaddata() {
    //   let _this = this;
    //   if (this.loading) {
    //     _this.$axios
    //       .get(_this.sortList.url, {
    //         params: _this.sortList.submit,
    //       })
    //       .then(function (response) {
    //         if (response.code == 1) {
    //           _this.sortList.submit.page++;
    //           _this.tableData = [..._this.tableData, ...response.data.list];
    //           _this.loading = false;
    //         } else {
    //           _this.$message({
    //             message: response.data.msg,
    //             type: "warning",
    //           });
    //         }
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //   }
    // },
  },
  watch: {
    stockHeight(val) {
      this.height = val;
    },
  },
};
</script>
<style lang="less">
.stock_linlist_table {
  border: 1px solid @LightBorderLine;
   .el-table__header {
    .header_stock {
      height: 30px;
    }
    th {
      border-bottom: 1px solid @LightBorderLine;
    }
    .cell {
      font-size: 12px;
      color: @Dark_gray !important;
      font-weight: normal;
    }
    .stock_list_right {
      .cell {
        text-align: left;
      }
    }
    .stock_list_center {
      .cell {
        text-align: left;
      }
    }
    .stock_list_left {
      background: @deepBg;
    }
  }
   .el-table__body {
    cursor: pointer;
    .stock_list_left {
      background: @deepBg;
      padding-bottom: 0;
      .stock_list_h2 {
        position: relative;
        font-size: 12px;
        color: @fff;
        line-height: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background: none;
        span {
          position: absolute;
          left: 0;
          font-size: 12px;
          color: @fff;
          padding: 0 3px;
          display: block;
          height: 14px;
          line-height: 14px;
          top: 50%;
          transform: translate(0, -50%);
        }
      }
      .stock_list_p {
        padding-left: 29px;
        font-size: 12px;
        color: @fff;
        line-height: 16px;
      }
    }
    .stock_list_center {
      .cell {
        color: @fff;
        font-size: 12px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        h2 {
          font-size: 14px;
          background: none;
        }
      }
    }
    .stock_list_right {
      .cell {
        text-align: left;
        h2 {
          font-size: 14px;
          background: none;
          // color: @fbSix;
        }
      }
    }
    td {
      border-bottom: 1px solid @LightBorderLine;
    }
  }
   .el-table__fixed::before {
    display: none;
  }
}
.el-loading-mask {
  background: none;
}
</style>